<template>
  <div class="container">
    <div class="content">
      <div class="currentStatus" v-if="currentStatus != '审核通过'">{{currentStatus}}</div>
      <a-form :form="form">
        <div id="listDiv">
          <div class="listDiv" v-for="(item,index) in receiptList" :key="index">
            <div class="list_item">
              <a-row :gutter="8">
                <a-col :span="7">
                  <a-row>
                    <a-col :span="24">
                      <a-form-item
                        label="会员编号"
                        :label-col="{ span: 8}"
                        :wrapper-col="{ span: 15,offset:1 }"
                      >
                        <span>{{item.targetMemberNo}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        :label-col="{ span: 8}"
                        :wrapper-col="{ span: 15,offset:1 }"
                        label="分账比例"
                      >
                        <span>{{item.percent}}%</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="7">
                  <a-form-item
                    :label-col="{ span: 6}"
                    :wrapper-col="{ span: 17,offset:1 }"
                    label="客户全称："
                  >
                    <span>{{item.targetMemberName}}</span>
                  </a-form-item>
                </a-col>
                <a-col :span="9">
                  <a-form-item v-bind="formItemLayout" label="上传协议">
                    <img
                      style="width:150px;"
                      :src="'/file/file/download/' + item.protocolPath"
                      alt
                      @click="viewPicture(item.protocolPath)"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="'/file/file/download/' + previewImage" />
        </a-modal>
        <div style="margin-top:15px;">
          <a-button
            v-if="currentStatus == '审核不通过'"
            type="primary"
            ghost
            class="addItem"
            @click="goModify"
          >修改</a-button>
          <a-button type="primary" class="addItem" style="margin-left: 1vw;" @click="backList">返回</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>


<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { mapState } from "vuex";
export default {
  name: "listStatusQueryDetail",
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19 }
        }
      },
      index: Number,
      logging: false,
      fileList: [],
      previewVisible: false,
      previewImage: "",
      // memberNo: [],
      // ratio: [],
      receiptList: [],
      currentStatus: ""
    };
  },
  computed: {
    ...mapState({
      imageSize: state => state.imageSize
    })
  },
  created() {},
  mounted() {},
  activated() {
    if (this.$route.query.id) {
      let id = this.$route.query.id;
      this.getsubAccountCheckDetail(id);
    }
    if (this.$route.query.status) {
      if (this.$route.query.status == "init") {
        this.currentStatus = "待审核";
      } else if (this.$route.query.status == "reject") {
        this.currentStatus = "审核不通过";
      } else if (this.$route.query.status == "pass") {
        this.currentStatus = "审核通过";
      } else {
        this.currentStatus = "";
      }
    }
  },
  watch: {},
  methods: {
    getListDivHeight() {
      let aaa = setTimeout(function() {
        let listDiv = document.getElementById("listDiv");
        console.log(listDiv.offsetHeight);
        console.log(listDiv.clientHeight);
        let H = ((document.body.clientHeight * 100) / 10000) * 65;
        console.log(H);
        if (listDiv.offsetHeight > H) {
          listDiv.style.height = "65vh";
        }
      }, 10);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.previewVisible = false;
    },
    viewPicture(value) {
      this.previewVisible = true;
      this.previewImage = value;
    },
    backList() {
      this.$router.push("/listStatusQuery");
    },
    goModify() {
      this.$router.push({
        path: "/newReceipt",
        query: { modify: "resubmit", id: this.$route.query.id }
      });
    },
    getsubAccountCheckDetail(id) {
      let data = {
        data: id,
        page: 1,
        pageSize: 10
      };
      api.subAccountCheckDetail(
        data,
        res => {
          console.log(res);
          if (res.code == "OK") {
            this.receiptList = res.list;
          }
        },
        err => {}
      );
    }
  }
};
</script>

<style scoped>
.content {
  padding: 40px;
}

.currentStatus {
  color: #52506b;
  font-size: 16px;
  margin-bottom: 20px;
}

.list_item {
  padding: 10px;
  /* background: #eee; */
  /* margin-bottom: 10px; */
  border: 1px solid #eee;
  /* border-bottom: none; */
}

#listDiv {
  overflow-y: auto;
}

/*滚动条样式*/
#listDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

#listDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

#listDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.listDiv:nth-child(even) {
  background: #eee;
}

.addItem {
  /* font-size: 15px; */
  width: 8vw;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vh;
}

.ant-form-item {
  margin-bottom: 10px;
}
</style>